<template>
  <el-dialog
    title="选择导师"
    :visible.sync="isShow"
    width="30%"
    :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="导师" prop="teacher">
        <el-select v-model="form.teacher" placeholder="请选择导师">
          <el-option 
            v-for='(item,index) in teacherOption'
            :key= 'index'
            :label="item.name" 
            :value="item.id">
          </el-option>
    
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" @click="select('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      form: {
        teacher: ''
      },
      rules:  {
        teacher: [
          { required: true, message: '请选择导师', trigger: 'blur' },
        ],
      },
      teacherOption: []
    }
  },
  methods: {
    show() {
      this.isShow = true
      this.getTeacher()
    },
    select (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('determineTeacher', this.form.teacher)
          this.handleClose()
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.isShow = false
      this.$refs['ruleForm'].resetFields();
    },
    getTeacher () {
      let params = {
        is_teacher: true
      }
      this.$axios.get('api/agent/teacher/list', {params: params}).then(res => {
        // console.log(res.data.data)
        if (res.data.code == 200) {
          this.teacherOption = res.data.data
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
            }
          })
        }
      })
    }
  }
}
</script>

<style>

</style>